<template>
  <div class="c-bg-sgray">
    <div class="c-w100 c-hh200 bg-practice c-p c-pt24">
      <div class="c-mh24 c-fs40 c-fc-white">我的练习</div>
      <div class="c-ph24 c-pa c-hh170 c-w100 p-b-80 c-p-l0 c-pz6">
        <div class="c-hh160 c-bg-white c-br10 c-flex-row c-aligni-center">
          <div class="c-flex-column c-aligni-center c-w0 c-flex-grow1">
            <div class="c-fc-xblack c-fs32"><span class="c-fw600">{{practiceInfo.questionNum}}</span><span class="c-fs22 c-fw400 c-pl4">题</span></div>
            <div class="c-fs18 c-fc-gray c-mt12">练习题数</div>
          </div>
          <div class="c-hh32 c-bd-l1-mgray"></div>
          <div class="c-flex-column c-aligni-center c-w0 c-flex-grow1">
            <div class="c-fc-xblack c-fs32"><span class="c-fw600">{{practiceInfo.hadTestQuestionNum}}</span><span class="c-fs22 c-fw400 c-pl4">题</span></div>
            <div class="c-fs18 c-fc-gray c-mt12">累计做题</div>
          </div>
          <div class="c-hh32 c-bd-l1-mgray"></div>
          <div class="c-flex-column c-aligni-center c-w0 c-flex-grow1">
            <div class="c-fc-xblack c-fs32"><span class="c-fw600">{{practiceInfo.schedule}}</span><span class="c-fs22 c-fw400 c-pl4">%</span></div>
            <div class="c-fs18 c-fc-gray c-mt12">完成度</div>
          </div>
          <div class="c-hh32 c-bd-l1-mgray"></div>
          <div class="c-flex-column c-aligni-center c-w0 c-flex-grow1">
            <div class="c-fc-xblack c-fs32"><span class="c-fw600">{{practiceInfo.accuracy}}</span><span class="c-fs22 c-fw400 c-pl4">%</span></div>
            <div class="c-fs18 c-fc-gray c-mt12">正确率</div>
          </div>
        </div>
      </div>
      <img class="c-pa c-ww140 c-hh153 c-p-r24 c-p-t24 c-pz1" :src="$addXossFilter(require('../../../assets/i/wap/exam/bg-myPractice.png'))" alt="">
    </div>
    <div class="c-ph24 c-mt100">
      <div class="c-bg-white c-ph24 c-pt24 c-pb40 c-br10">
        <div class="c-fs28 c-fw600 c-fc-xblack">练习模式</div>
        <div class="c-flex-row c-justify-sb c-flexw-wrap">
          <div @click="goPracticeType(2)" class="c-flex-row c-flex-center c-hh88 c-w48 c-bd1-mgray c-mt24">
            <div class="c-flex-row c-aligni-center">
              <img class="c-ww40 c-hh40" :src="$addXossFilter(require('../../../assets/i/wap/exam/practice4.png'))" alt="">
              <div class="c-ww184">
                <div class="c-fs24 c-fc-sblack c-ml10">章节练习</div>
                <div class="c-fs20 c-fc-gray c-ml10">按章节分类练习</div>
              </div>
            </div>
          </div>
          <div @click="goPracticeType(1)" class="c-flex-row c-flex-center c-hh88 c-w48 c-bd1-mgray c-mt24">
            <div class="c-flex-row c-aligni-center">
              <img class="c-ww40 c-hh40 c-mt4" :src="$addXossFilter(require('../../../assets/i/wap/exam/practice3.png'))" alt="">
              <div class="c-ww184">
                <div class="c-fs24 c-fc-sblack c-ml10">题型练习</div>
                <div class="c-fs20 c-fc-gray c-ml10">按题型分类练习</div>
              </div>
            </div>
          </div>
          <div @click="practiceInOrder" class="c-flex-row c-flex-center c-hh88 c-w48 c-bd1-mgray c-mt24">
            <div class="c-flex-row c-aligni-center">
              <img class="c-ww40 c-hh40 c-mt4" :src="$addXossFilter(require('../../../assets/i/wap/exam/practice1.png'))" alt="">
              <div class="c-ww184">
                <div class="c-fs24 c-fc-sblack c-ml10">顺序练习</div>
                <div class="c-fs20 c-fc-gray c-ml10" v-if="practiceInfo.sequenceTest">{{practiceInfo.sequenceTest.hadAnswerNum}}/{{practiceInfo.sequenceTest.questionNum}}</div>
              </div>
            </div>
          </div>
          <div @click="practiceInRandom" class="c-flex-row c-flex-center c-hh88 c-w48 c-bd1-mgray c-mt24">
            <div class="c-flex-row c-aligni-center">
              <img class="c-ww40 c-hh40 c-mt4" :src="$addXossFilter(require('../../../assets/i/wap/exam/practice2.png'))" alt="">
              <div class="c-ww184">
                <div class="c-fs24 c-fc-sblack c-ml10">随机练习</div>
                <div class="c-fs20 c-fc-gray c-ml10">试题随机打乱练习</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-ph24 c-mt24">
      <div class="c-bg-white c-ph24 c-pt24 c-pb40 c-br10">
        <div class="c-fs28 c-fw600 c-fc-xblack">练习记录</div>
        <div class="c-flex-row c-justify-sb c-flexw-wrap">
          <div @click="goCollect" class="c-flex-row c-flex-center c-hh88 c-w48 c-bd1-mgray c-mt24">
            <div class="c-flex-row c-aligni-center">
              <img class="c-ww40 c-hh40" :src="$addXossFilter(require('../../../assets/i/wap/exam/my_celect.png'))" alt="">
              <div class="c-ww184">
                <div class="c-fs24 c-fc-sblack c-ml10">我的收藏</div>
              </div>
            </div>
          </div>
          <div @click="goMyWrong" class="c-flex-row c-flex-center c-hh88 c-w48 c-bd1-mgray c-mt24">
            <div class="c-flex-row c-aligni-center">
              <img class="c-ww40 c-hh40 c-mt4" :src="$addXossFilter(require('../../../assets/i/wap/exam/my_error.png'))" alt="">
              <div class="c-ww184">
                <div class="c-fs24 c-fc-sblack c-ml10">我的错题</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
// let searchText; //搜索输入框
export default {
  name: "PracticeModes",
  components: {
  },
  props: [],
  data() {
    return {
      practiceInfo: '',
      practiceId: 0,
      ttId: "",
      tpId: "",
      tlId: "",
      progress: "",
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    goCollect() {
      let queryT = {
        libraryId:this.practiceInfo.libraryId,
        type: 6,
      }
      this.$routerGo(this, "push", {
        path: '/homePage/itemBank/questionCollect',
        query: queryT
      })
    },
    goMyWrong() {
      // if (!this.practiceInfo.wrongColectInfo || Number(this.practiceInfo.wrongColectInfo.wrongNum) == 0) {
      //   this.$showCjToast({
      //     text: "暂无错题",
      //     type: "warn",
      //     time: 1500
      //   });
      //   return
      // }
      let queryT = {
        rId: this.practiceInfo.wrongColectInfo && this.practiceInfo.wrongColectInfo.rId ? this.practiceInfo.wrongColectInfo.rId : 0,
        practiceId:this.practiceInfo.libraryId,
        isFromPractice:1
      }
      this.$routerGo(this, "push", {
        path: '/member/myWrongTopic/practiceWrong/practiceWrongList',
        query: queryT
      })
    },
    practiceInOrder() {
      if (this.practiceInfo.sequenceTest.status == 2) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionResult',
          query: {
            examMainId: this.practiceInfo.sequenceTest.examMainId,
            type: 1, //1:顺序练习 2:随机练习
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: 100,
          }
        })
      } else if (this.practiceInfo.sequenceTest.status == 1) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: {
            libraryId: this.practiceId,
            type: 1,
            goOnNum: this.practiceInfo.sequenceTest.continueNum,
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: this.progress,
          }
        })
      } else {
        this.takePartIn(1);
      }
    },
    practiceInRandom() {
      if (this.practiceInfo.randomTest.status == 2) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionResult',
          query: {
            examMainId: this.practiceInfo.randomTest.examMainId,
            type: 2, //1:顺序练习 2:随机练习
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: 100,
          }
        })
      } else if (this.practiceInfo.randomTest.status == 1) {
        this.$routerGo(this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: {
            libraryId: this.practiceId,
            type: 2,
            goOnNum: this.practiceInfo.randomTest.continueNum,
            ttId: this.ttId,
            tpId: this.tpId,
            tlId: this.tlId,
            progress: this.progress,
          }
        })
      } else {
        this.takePartIn(2);
      }
    },
    //加入考试
    takePartIn(mode) {
      let $this = this;
      let data = {libraryId: this.practiceId, type: mode};
      utilJs.postMethod(`${global.apiurl}itemBank/takePartIn`, data, function (
        res
      ) {
        $this.$routerGo($this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: {
            libraryId: $this.practiceId,
            type: mode,
            goOnNum: 1,
            ttId: $this.ttId,
            tpId: $this.tpId,
            tlId: $this.tlId,
            progress: $this.progress,
          }
        })
      })
    },
    goPracticeType(type) {
      this.$routerGo(this, "push", {
        path: "/homePage/itemBank/practiceMode",
        query: {
          practiceMode: type,
          practiceId: this.practiceId,
          ttId: this.ttId,
          tpId: this.tpId,
          tlId: this.tlId,
          progress: this.progress,
        }
      });
    },
    getPracticeInfo() {
      let getUrl = global.apiurl + "itemBank/practiseInfo/" + this.practiceId
      utilJs.getMethod(getUrl, res => {
        this.practiceInfo = res;
      })
    },
    //分享
    wechatShare: function () {
      let title = "练习列表"; //window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
  },
  activated() {
    setDocumentTitle("练习");// eslint-disable-line
    this.practiceId = this.$route.query.practiceId || "";
    this.ttId = this.$route.query.ttId || "";
    this.tpId = this.$route.query.tpId || ""; //环节id
    this.tlId = this.$route.query.tlId || "";
    this.progress = this.$route.query.progress || "";
    this.getPracticeInfo();
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.bg-practice {
  background: linear-gradient(90deg, rgb(154, 170, 255) 0%, rgba(108, 131, 2555, 1) 100%);
}
.p-b-80 {
  bottom: -2rem;
}
</style>


